<template>
	<view class="backgroud">
		<view class="top">
			<!-- 返回箭头 -->
			<view>
				<image src="../../static/返回my.svg" class="back666" mode="heightFix" @tap="backEvent()"></image>
			</view>
			<view class="me">
				我的
			</view>
			<view class="headimagearea">
				<image src="../../static/AK-YK_我的.svg" mode="heightFix" class="headimage"></image>
				<view class="info">
					用户名
				</view>
				<view class="info">
					{{name}}
				</view>
				<view class="info">
					电话
				</view>
				<view class="info">
					{{tel}}
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="breakup" @tap="breakup()">
				分手
			</view>

			<view class="getall">
				<view class="getallbutton" @tap="signout">
					<text class="gettext">退出登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.id = uni.getStorageSync("id")
			this.cpId = uni.getStorageSync("cpId")
		},
		onShow() {
			uni.request({
				header: {
					token: uni.getStorageSync("token")
				},
				data: {
					id: this.id
				},
				url: this.$baseUrl + "/user/getAccount",
				method: 'POST',
				success: (res) => {
					this.name = res.data.name
					this.tel = res.data.tel
				}
			})
		},
		data() {
			return {
				cpId: "",
				id: "",
				name: "",
				tel: ""
			}
		},
		methods: {
			backEvent() {
				uni.navigateBack(1)
			},
			signout() {
				uni.showModal({
					title: "退出登录",
					content: "确认要退出登录吗",
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pages/signin/signin"
							})
						}
					}
				})
			},
			breakup() {
				uni.showModal({
					content: "确认要分手吗",
					success: (res) => {
						if (res.confirm) {
							uni.showModal({
								content: "第二次确认",
								success: (res) => {
									if (res.confirm) {
										uni.showModal({
											content: "第三次确认",
											success: (res) => {
												if (res.confirm) {

													uni.request({
														header: {
															token: uni
																.getStorageSync(
																	"token")
														},
														data: {
															id: this.id,
															cpId: this.cpId
														},
														url: this.$baseUrl +
															"/user/breakUp",
														method: 'POST',
														success: (res) => {
															uni.showToast({
																title: "分手成功",
																icon: 'success',
																duration: 1500,
																success: (
																	res
																) => {
																	setTimeout
																		(() => {
																				uni.navigateTo({
																					url: "/pages/signin/signin"
																				})
																			},
																			1500
																		)
																}
															})
														}
													})
												}
											}
										})
									}
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.backgroud {
		position: relative;
		background: linear-gradient(197.99deg, #2C9AFF -14.52%, #9C74F3 16.96%, #EC81B4 54.17%, #F1BC97 74.34%, #F4E283 100%);
		min-height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.back666 {
		position: absolute;
		height: 16px;
		width: 9px;
		left: 15px;
		top: 17px;
	}

	.top {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.me {
		width: 100vw;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 20px;
		line-height: 50px;
		color: black;
		text-align: center;
		background-color: white
	}

	.headimagearea {
		margin-top: 30px;
		width: 100px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.info {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 300;
		font-size: 20px;
		line-height: 50px;
		color: black;
		text-align: center;
	}

	.headimage {
		height: 90px;
	}

	.breakup {
		margin-top: 100px;
		background-color: gray;
		width: 100px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		border-radius: 10px;
	}

	.bottom {
		flex: 1;
		width: 100vw;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 24px;
		box-sizing: border-box;
	}

	.getall {
		position: relative;
		width: auto;
		flex: 1;
		display: flex;
		justify-content: center;
		padding-bottom: 24px;

	}

	.getallbutton {
		margin-top: auto;
		/* 橙 */
		width: 80vw;
		background: #FF825A;
		/* identical to box height, or 100% */
		height: 50px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 36px;

	}

	.gettext {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 24px;
		line-height: 24px;
		/* identical to box height, or 100% */

		text-align: center;

		color: #FFFFFF;
	}
</style>